<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>会员补卡</title>
<style>
	.issue{
		padding-top:7px;
		font-size:14px;
	}
</style>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<script src="../layui/layui.js"></script>
   <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
     <legend>会员补卡</legend>
   </fieldset> 
  <div class="layui-collapse">
   <div class="layui-colla-item">
     <h2 class="layui-colla-title">请核对以下会员信息</h2>
      <div class="layui-colla-content layui-show">
            <!-- 第一行 -->
		     <div class="layui-form-item">	  
		       <label class="layui-form-label">会员卡号：</label>
			     <div class="layui-input-inline"><!-- 会员卡id初值 -->
			     	<div class="issue">
    		      		<span th:text="${memI.cardId}"></span>
    		      	</div>
			       <input id="idA" type="hidden" th:value="${memI.cardId}" class="layui-input" readonly="readonly">
			     </div>
			   <label class="layui-form-label">会员姓名：</label>
    		      <div class="layui-input-inline">
    		      	<div class="issue">
    		      		<span th:text="${memI.memberName}"></span>
    		      	</div>
    		      </div>
    		   <label class="layui-form-label">会员类型：</label>
    		      <div class="layui-input-inline">
    		      	<div class="issue">
    		      		<span th:text="${memI.memberType}"></span>
    		      	</div>
      		     </div>
      		   <label class="layui-form-label">会员性别：</label>
			     <div class="layui-input-inline">
			     	<div class="issue">
    		      		<span th:text="${memI.memberSex}"></span>
    		      	</div>
			     </div>
		   </div>
		   <!-- 第二行 -->
		   <div class="layui-form-item">	  
		       <label class="layui-form-label">加入时间：</label>
			     <div class="layui-input-inline">
			     	<div class="issue">
    		      		<span th:text="${memI.joinTime}"></span>
    		      	</div>
			     </div>
			   <label class="layui-form-label">出生日期：</label>
    		      <div class="layui-input-inline">
    		      	<div class="issue">
    		      		<span th:text="${memI.memberBirthday}"></span>
    		      	</div>
    		      </div>
    		   <label class="layui-form-label">支付方式：</label>
    		      <div class="layui-input-inline">
    		      	<div class="issue">
    		      		<span th:text="${memI.payment}"></span>
    		      	</div>
      		      </div>
      		   <label class="layui-form-label">证件类型：</label>
    		      <div class="layui-input-inline">
    		      	<div class="issue">
			     		<span th:text="${memI.idcardType}"></span>
			     	</div>
      		     </div>
		   </div>
		   <!-- 第三行 -->
		   <div class="layui-form-item">	  
		       <label class="layui-form-label">身份证号：</label>
			     <div class="layui-input-inline">
			     	<div class="issue">
			     		<span th:text="${memI.idcardNumber}"></span>
			     	</div>
			     </div>
			   <label class="layui-form-label">健身需求：</label>
    		      <div class="layui-input-inline">
	    		      <div class="issue">
	    		      	<span th:text="${memI.memberNeeds}"></span>
	    		      </div>
    		      </div>
    		   <label class="layui-form-label">可用状态：</label>
    		      <div class="layui-input-inline">
	    		      <div class="issue">
	    		      	<span id="state" th:text="${memI.state}"></span>
	    		      </div>
    		      </div>
		   </div>
		   <hr class="layui-bg-green">
		   <div class="layui-form-item">
			  <div class="layui-input-block" style="height:40px;width:180px;margin:auto;">
			     <input type="button" id="reportLost" class="layui-btn layui-btn-danger" value="挂失">
		      </div>
	    	</div>
		</div>
	  </div>
  </div>
  <form class="layui-form" id="form1" onsubmit="return false" action="##">
  <div class="layui-collapse">
   <div class="layui-colla-item">
     <h2 class="layui-colla-title">请输入补卡信息并再次确认以下信息</h2>
      <div class="layui-colla-content layui-show">
        <!-- 第一行 -->
		     <div class="layui-form-item">	  
			     <label class="layui-form-label">原卡号：</label>
			     <div class="layui-input-inline">
			     	<div class="issue">
	    		      <span th:text="${memI.memberId}"></span>
	    		    </div>
			     </div>
			     <label class="layui-form-label">会员姓名：</label>
    		      <div class="layui-input-inline">
    		      <div class="issue">
	    		      <span th:text="${memI.memberName}"></span>
	    		  </div>
    		      </div>
    		      <label class="layui-form-label">类型：</label>
    		        <div class="layui-input-inline">
    		        	<div class="issue">
	    		      		<span th:text="${memI.memberType}"></span>
	    		  		</div>
      		        </div>
      		        <label class="layui-form-label">联系电话：</label>	  		       
			       <div class="layui-input-inline">
			       <div class="issue">
	    		      		<span th:text="${memI.memberPhone}"></span>
	    		  	</div>
			      </div>
		   </div>
		   <!-- 第二行 -->
		   <div class="layui-form-item">
			   <label class="layui-form-label">补卡卡号：</label>
			      <div class="layui-input-inline">
			         <input type="text" name="memberId" id="memberId" placeholder="补卡卡号为" class="layui-input">
			      </div>
      	   </div>
	    <hr class="layui-bg-green">
	    <!-- 第三行 -->
		<div class="layui-form-item">
		  <div class="layui-input-block" style="height:60px;width:200px;margin:auto;">
		     <input type="button" id="submit" class="layui-btn" value="确定">
		     <input type="reset" id="addreset" class="layui-btn layui-btn-primary" value="重置">
	     </div>
	    </div> 
	  </div>
	</div>
  </div>	
 </form>
<script src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use(['layer','jquery','form','element'],function(){
	var layer=layui.layer;
	var $=layui.jquery;
	var form=layui.form;
	var element=layui.element;
	
	$(function(){
		var keyong="可用";
		var jinyong="到期";
		var guashi="挂失";
		$(".issue").find("span").each(function(){
			if($(this).html()==keyong){
				$(this).css("color","green");
			}
			if($(this).html()==jinyong){
				$(this).css("color","red");
			}
			if($(this).html()==guashi){
				$(this).css("color","red");
			}
		})
	})
	
	$("#memberId").blur(function(){
		var memberId=document.getElementById("memberId");
		if(memberId.value==""||undefined||null||isNaN(memberId.value)||memberId.value.length!=6){
			memberId.focus();
			layer.msg("请输入正确的卡号！");
		}
	});
	$(document).on('click','#reportLost',function(){
		var cardId=$("#idA").val();
		var state=$("#state");
		//alert(state.text());
		$.ajax({
			type:'post'
			,url:'../member/reportLost?cardId='+cardId
			,success:function(){
				if(state.text()==="到期"){
					layer.msg("到期卡无法挂失！");
				}
				else{
					layer.msg("会员卡挂失成功");
					state.html("挂失");
					state.css("color","red");
				}
				//alert(state.text());
			}
			,error:function(){
				alert("异常!");
			}
		})
	})
	$(document).on('click','#submit',function(){
		var memberId=$("#memberId").val();
		if(memberId===""){
			layer.msg("补卡号不能为空");
		}
		else{
			var state=$("#state");
			if(state.text()==="挂失"){//如果该卡的状态为挂失才可以补卡
				$.ajax({
					type:'post'
					,url:'../member/Issue'
					,data:{
						"oldCardId":$("#idA").val() //老卡ID
						,"newCardId":$("#memberId").val()//新卡ID
					}
					//,dataType:"json"
					,success:function(){
						alert("补卡成功");
						var index = parent.layer.getFrameIndex(window.name); //获取弹窗的姓名
						parent.layer.close(index);							 //关闭这个弹窗
					}
					,error:function(){
						alert("异常");
					}
				});
			}
			else{//当卡状态是可用的时候不能挂失卡
				layer.msg("请先挂失卡!");
			}
			
		}
	});
});
</script>
</body>
</html>